AngularJs 学习笔记（五）
一、Angular单页面应用程序
一个应用是由若个视图组合而成的，根据不同业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。
SPA（Single Page Application）指的是单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合css3动画模仿原生App交互，然后再进行打包（使用工具把web应用包一个壳，这个壳本质上浏览器）变成一个“原生”应用。
- 通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM
- 新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”
- 通过单页面应用可以很好的解决这个问题。
- 实现单页面应用需要具备：
a.只有一个页面
b.链接使用锚点
好处：
性能比较好（一个页面。多个功能，只有局部变化）
减轻了服务器的负担
对用户体验有好处
弊端：对seo特别不友好
通过Ajax来实现单页面应用程序
监听锚点的变化
window.addEventListener('hashchange',function () {
获取锚点
var hash = location.hash;
hash = hash.slice(1);
var xhr = new XMLHttpRequest();
var url = 'singleApp.php?hash='+ hash;
xhr.open('get',url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status==200){
var res = xhr.responseText;
document.querySelector('.content').innerHTML = res;
}
}
});
二、路由
在后端开发中通过url地址可以实现页面（视图）的切换
但是AngularJs是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成
所以无需切换url地址（即不允许跳转）
但web应用中又经常通过链接（a标签）来更新页面（视图）
当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。
AngularJs对这一实现原理进行了封装，将锚点的变化封装成路由（Route），这是与后端路由的根本区别。
使用路由分为四步：
1.引入angular-route.js
<script src="angular-route.js"></script>
2.实例化模块时，注入ngRoute模块
var app = angular.module('app',['ngRoute']);
3.配置路由模块
app.config(['$routeProvider',function ($routeProvider) {
当锚点为指定值，帮你处理相应的逻辑
路由规定，在锚点之前，加上一个“/”
$routeProvider.when('/index',{
template:"<h1>首页</h1>"
})
.when('/music',{
template:"<h1>关于</h1>"
})
.when('/singer',{
template:"<h1>联系</h1>"
})
.otherwise({
redirectTo:'/index'
})
}]);
4.布局模版
<div class="nav">
<ul>
<li><a href="#/index">首页</a></li>
<li><a href="#/music">音乐</a></li>
<li><a href="#/singer">歌手</a></li>
</ul>
</div>
<div class="content" ng-view></div>
